<template>
  <div
    id="device-tree"
    class="dtree-wrap"
    :class="
      (!showTabs ? 'deviceTree' : '')
    "
  >
    <div class="ctl-box" v-show="showTabs">
      <bs-add-icon
        class="hover-effect"
        @click.native="addTreeNode"
      ></bs-add-icon>
      <bs-remove-icon
        class="hover-effect"
        @click.native="removeTreeNode"
      ></bs-remove-icon>
      <bs-edit-icon
        class="hover-effect"
        @click.native="editTreeNode"
      ></bs-edit-icon>
      <bs-refresh-icon
        class="hover-effect shuaxin"
        @click.native="refreshTreeNode"
      ></bs-refresh-icon>
    </div>
    <div class="tree-box no-ctl">
      <bs-tree
        ref="asyncTree"
        :default-props="defaultProps"
        :default-checked-keys="defaultCheckedKeys"
        :default-expanded-keys="defaultExpandedKeys"
        :show-checkbox="false"
        :draggable="false"
        :filter-visible="false"
        :context-menu-visible="false"
        :context-menu-data="contextMenuData"
        :data="treeData"
        :highlight-current="true"
        @node-click="nodeClick"
      ></bs-tree>
    </div>
    <ChannelDialog :visible.sync="showChannelDialog" :form="channelForm" @add="handleAddChannel"></ChannelDialog>
  </div>
</template>
<script>
import NewsApi from '@/api/news.js'
import ChannelDialog from './ChannelDialog.vue'

export default {
  name: 'channel_tree',
  data() {
    return {
      treeNodeData: {},
      defaultProps: {
        id: 'id',
        label: 'name',
        owner: 'owner',
        isLeaf: 'hasChild',
      },
      treeData: [],
      defaultTreeData: {},
      defaultCheckedKeys: [],
      defaultExpandedKeys: [0],
      contextMenuData: [],
      showChannelDialog: false,
      channelForm: {}
    }
  },
  props: {
    showTabs: {
      type: Boolean,
      default: true,
    },
    showMinType: {
      type: String,
      default: '1',
    }
  },
  components: { ChannelDialog },
  mounted() {
    this.$nextTick(() => {
      this.loadTreeData()
    })
  },
  methods: {
    //终端分组树
    async loadTreeData() {
       this.treeData = [
        {
          id: 0,
          name: '融媒体',
          type: 1,
          children: [],
        },
      ]
      this.treeNodeData = this.treeData[0]

      let params = { type: this.showMinType }
      const res = await NewsApi.channelList(params)
      if (res) {
          res.forEach((item) => {
            this.treeData[0].children.push(item)
          })
      }
    },
    // 点击节点
    nodeClick(data, node, obj) {
      this.treeNodeData = data
      this.$emit('click', data)
    },
    // 添加节点
    addTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      const selectTreeID = arr.length === 0 ? 0 :this.treeNodeData.id
      this.channelForm = {
        id: 0,
        name: '',
        comment: '',
        parentId: selectTreeID
      }
      this.showChannelDialog = true
    },
    // 刷新树
    refreshTreeNode() {
      this.loadTreeData()
      this.$emit('refresh')
    },
    async handleAddChannel(form) {
      let res
      if(form.id) {
        res = await NewsApi.editChannel({
          ...form,
          type: this.showMinType,
          parentId: form.parentId
        })
      } else {
        res = await NewsApi.addChannel({
          ...form,
          type: this.showMinType,
          parentId: form.parentId
        })
      }
      if(res && res.code == 200) {
        this.$message.success('操作成功')
        this.loadTreeData()
        this.showChannelDialog = false
      }
    },
    // 编辑节点
    editTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个栏目')
        return
      }
      let editorForm = {}
      editorForm.id = this.treeNodeData.id
      editorForm.name = this.treeNodeData.name
      editorForm.comment = this.treeNodeData.comment
      editorForm.parentId = this.treeNodeData.parentId
      this.channelForm = editorForm
      this.showChannelDialog = true
    },
    // 删除节点
    async removeTreeNode() {
      var arr = Object.keys(this.treeNodeData)
      if (arr.length === 0) {
        this.$alert('提示', '请选择一个栏目')
        return
      }
      const bool = await this.$confirm('提示', '是否确认删除？')
      if (bool) {
        const selectTreeID = this.treeNodeData.id
        const params = { id: selectTreeID, type: this.showMinType }
        const res = await NewsApi.deleteChannel(params)
        if(res && res.code == 200) {
          this.$message.success('操作成功')
          this.loadTreeData()
        }
      }
    },
    // 点击tab页
    doClickTree(treeItem) {
      this.treeNodeData = treeItem
    },
  },
}
</script>

<style lang="scss" scoped>
.deviceTree {
  width: 100%;
  .el-tabs--border-card {
    border: 0 !important;
  }
  ::v-deep .el-tabs--border-card .el-tabs__content {
    padding: 0;
  }
}
.ctl-box {
  line-height: 1.15;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid $bg-dc;
  padding: 12px 0 12px 0;
  margin: 0;
}
.dtree-wrap {
  ::v-deep .el-tabs__item {
    padding: 0 !important;
    width: 125px;
    text-align: center;
  }
  ::v-deep .el-tabs__item:last-child {
    border-right: 0 !important;
  }
}
.tree-box {
  width: 248px;
  height: calc(100vh - 200px);
  overflow: auto;

  .tree {
    height: 100%;
    ::v-deep .el-tree {
      min-width: 100%;
      display: inline-block !important;
    }
  }

  &.no-ctl {
    height: calc(100vh - 150px);
    .tree {
      height: 100%;
      ::v-deep .el-tree {
        min-width: 100%;
        display: inline-block !important;
      }
    }
  }
}
</style>